<template>
  <div class="list">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        label="商品ID"
        width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="商品名"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <span>{{ scope.row.name }}</span>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data () {
    return {
      tableData: [{
        id: '1',
        name: '安慕希农场橙子',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '2',
        name: '安慕希农场橙子',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: '3',
        name: '安慕希农场橙子',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id: '4',
        name: '安慕希农场橙子',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted () {
    this.fecahData()
  },
  methods: {
    fecahData () {
      let params = {}
      this.axios('/api/journalismApi', params).then((res) => {
        console.log(res)
      }) 
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
}
</script>

<style lang="scss" scoped>
  .list {
    background: #fff;
    padding: 15px;
    box-shadow: inset 0 0 6px #424f63;
    border: 1px solid #e6ebf5;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    color: #2d2f33;
  }
</style>

